<template>
  <el-dialog
    v-model="dialogVisible"
    width="540"
    title="绑定智慧计量账号"
    destroy-on-close
    :show-close="false"
    :close-on-click-modal="false"
    custom-class="login-form-dialog"
  >
    <section>
      <img src="@/assets/imgs/jl-logo.png" alt="" />
      <div>智慧计量系统</div>
    </section>
    <el-form
      ref="formRef"
      v-loading="formLoading"
      :model="form"
      :rules="rules"
      label-position="right"
      label-width="100px"
    >
      <el-form-item label="用户账号" prop="username">
        <el-input
          v-model="form.username"
          :maxlength="50"
          placeholder="请输入用户账号"
        />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="form.password"
          type="password"
          :show-password="true"
          :maxlength="50"
          placeholder="请输入密码"
        />
      </el-form-item>
      <div class="tip-box">
        <img
          src="@/assets/imgs/tip-icon.png"
          mode="scaleToFill"
          style="width: 20px; height: 20px"
        />
        账号绑定之后，可从智慧计量系统免登录进入煤市通
      </div>
    </el-form>
    <template #footer>
      <div class="footer">
        <el-button @click="cancelDialog"> 取消 </el-button>
        <el-button type="primary" @click="submitForm">
          授权并绑定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { cloneDeep } from 'lodash'
import * as authUtil from '@/utils/auth'
import { bindWisdomAccount } from '@/api/system/user/profile'

const emit = defineEmits(['success'])
const message = useMessage()
const validMess = ref('获取验证码')
const formLoading = ref(false)
const dialogVisible = ref(false)
const formRef = ref()
const form = ref({
  username: undefined,
  password: undefined
})

const rules = reactive({
  username: [
    {
      required: true,
      message: '请输入用户账号',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    }
  ]
})

const open = async (mobile) => {
  resetFn()
  dialogVisible.value = true
}

const submitForm = async () => {
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  try {
    formLoading.value = true
    const res = await bindWisdomAccount(form.value)
    message.success('绑定成功')
    emit('success')
    dialogVisible.value = false
  } finally {
    formLoading.value = false
  }
}

const cancelDialog = () => {
  resetFn()
  dialogVisible.value = false
}

const resetFn = () => {
  form.value = {
    username: undefined,
    password: undefined
  }
  formRef.value?.resetFields()
}

defineExpose({ open })
</script>

<style lang="scss" scoped>
.el-button.code {
  color: #409efe !important;
}

.tip-box {
  display: flex;
  padding: 8px 10px;
  color: #e6a23c;
  border-radius: 4px;
  font-size: 14px;
  background: rgba(230, 162, 60, 0.1);

  img {
    margin-right: 2px;
  }
}

section {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 32px;

  > div {
    font-size: 24px;
    color: #303133;
    font-weight: 600;
    font-family: DFPZongYiW7-GB, DFPZongYiW7-GB-400;
  }
}

:deep(.el-input--default) {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}

:deep(.el-button--large) {
  font-size: 16px;
}

:deep(.el-input__password) {
  font-size: 18px;
}
</style>

<style lang="scss">
.el-dialog.login-form-dialog {
  box-shadow: 0px 12px 48px 0px rgba(0, 0, 0, 0.03),
    0px 9px 28px 0px rgba(0, 0, 0, 0.05),
    0px 6px 16px 0px rgba(0, 0, 0, 0.08);
}

.login-form-dialog .el-dialog__header {
  padding: 30px 40px;
}

.login-form-dialog .el-dialog__title {
  font-weight: 500;
  font-size: 28px;
  font-family: PingFang SC, PingFang SC-500;
}

.login-form-dialog .el-dialog__body {
  padding: 0px 40px !important;
}

.login-form-dialog .el-dialog__footer {
  margin-top: 50px;
  padding: 10px 20px !important;
  border-top: 1px solid #e4e7ed;
}
</style>
